<?php $types = [1=>'全平台',2=>'渠道',3=>'区服']; ?>

<!-- 玩家行为统计 -->
<div class="box ">
  <div class="box-body">
    <div class="row">
      <form class="form-inline" action="{{route('behavior.index')}}" pjax-container>

        <div class="col-xs-2">
          <div class="form-group">
            <label>类型</label>
            <select name="type" class="form-control" style="width: 150px;">
              @foreach ($types as $type=>$name)
                @if($type == $t_id)
                  <option value="{{$type}}" selected="selected">{{ $name }}</option>
                @else
                  <option value="{{$type}}">{{ $name }}</option>
                @endif
              @endforeach
            </select>
          </div>
        </div>

        <div class="col-xs-2">
          <div class="form-group">
            <label>游戏区服</label>
            <select name="server_id" class="form-control" style="width: 150px;">
              <option value="0">全服</option>
              @foreach ($server as $server_id=>$name)
                @if($server_id == $s_id)
                  <option value="{{$server_id}}" selected="selected">{{ $name }}</option>
                @else
                  <option value="{{$server_id}}">{{ $name }}</option>
                @endif
              @endforeach
            </select>
          </div>
        </div>

        <div class="col-xs-2">
          <div class="form-group">
            <label>渠道</label>
            <select name="channel_id" class="form-control" style="width: 150px;">
              <option value="0">全渠道</option>
              @foreach ($channels as $channel_id=>$name)
                @if($channel_id == $c_id)
                  <option value="{{$channel_id}}" selected="selected">{{ $name }}</option>
                @else
                  <option value="{{$channel_id}}">{{ $name }}</option>
                @endif
              @endforeach
            </select>
          </div>
        </div>

        <div class="col-xs-2">
          <div class="form-group">
            <label>日期</label>
            <input type="text" class="form-control" id="date-time" value="{{$date_time}}" name="date_time">
          </div>
        </div>
        <button type="submit" class="btn btn-default">查询</button>
      </form>
    </div>
  </div>
</div>

<div class="row">
  {{--充值档位统计--}}
  <div class="col-md-6">
    <!-- Line chart -->
    <div class="box box-primary">
      <div class="box-header with-border">
        <i class="fa fa-bar-chart-o"></i>
        <h3 class="box-title">玩家等级流失统计</h3>
      </div>
      <div class="box-body">
        <canvas id="top-up" style="height:300px; width:100%"></canvas>
      </div>
      <!-- /.box-body-->
    </div>
    <!-- /.box -->
  </div>
  <!-- /.col -->

</div>

<script>
  var levels = @json($level_remain['levels']);
  var numbers = @json($level_remain['numbers']);
  $(function () {
    $('#date-time').datetimepicker({
      "format": "YYYY-MM-DD",
      "locale": "zh-CN"
    });

    //充值档位统计
    var top_up = document.getElementById("top-up").getContext('2d');
    var top_up_data ={
      type: 'line',
      data: {
        labels: levels,
        datasets: [{
          label: '流失数量',
          data: numbers,
          borderColor: "rgba(250,150,30,1)",
          backgroundColor: "rgba(250,150,30,.3)",
          borderWidth: 1
        }]
      },
      options: {
        // 图表标题
        title: {
          display: true,
          text: "当日流失玩家等级"
        },
        // 图例设置
        legend: {
          labels: {
            padding: 30,
            // 使用圆形样式
            usePointStyle: true
          },
          // 显示位置
          position: 'bottom'
        },
        // tooltip提示样式
        tooltips: {
          enabled: true,
          // 同时显示x轴上的数据
          mode: 'index',
          // 通过回调修改tooltips的标题
          callbacks: {
            title: function (item) {
              return  item[0].xLabel + "级"
            }
          }
        },
        scales: {
          yAxes: [{
            ticks: {
              beginAtZero:true
            }
          }]
        }
      }
    };
    new Chart(top_up,top_up_data);

  });
</script>